<style lang="less" scoped>
  .table__con {
    position: relative;
    .table--add {
      position: absolute;
      right: 0;
      top: 2px;
      z-index: 999;
    }
  }
</style>

<template>
  <el-dialog :visible.sync="currentShowFlag" append-to-body fullscreen :close-on-click-modal="false" :close-on-press-escape="false" @open="handleDialogOpen" @closed="handleDialogClosed">
    <div slot="title" class="detail-dialog__header">{{$t('system_office.detailDialog')}}</div>
    <div>
      <simple-form ref="form" v-model="formModel" :form-field="formField" :grid="{xs: 12, sm: 12, md: 8}" :view-flag="viewFlag"></simple-form>
      <div class="table__con" v-if="viewFlag">
        <el-tabs value="first">
          <el-tab-pane label="变更日志" name="first" :style="{height: tableConHeight}">
            <simple-table :table-column="tableColumn" :table-data="tableData" :pageable="false">
              <template slot-scope="scope" slot="category">
                {{$getDictLabel({type: 'sys_office_category', value: scope.row.category})}}
              </template>
              <template slot-scope="scope" slot="status">
                {{$getDictLabel({type: 'data_status', value: scope.row.status})}}
              </template>
            </simple-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div slot="footer">
      <el-button @click="handleDialogClose">{{viewFlag ? $t('operation.close') : $t('operation.cancel')}}</el-button>
      <el-button type="primary" @click="handleDataSubmit" v-if="!viewFlag">{{$t('operation.submit')}}</el-button>
    </div>
  </el-dialog>
</template>
<script>
import Axios from 'axios'

const BASEURL = {
  get: '/api/system/office/get',
  save: '/api/system/office/save',
  update: '/api/system/office/update',
  log: '/api/system/office/logs'
}
export default {
  name: 'main_office_detail',
  data () {
    return {
      formModel: { parent: {}, status: 'Y' },
      tableData: [],
      tableConHeight: '0px'
    }
  },
  inject: ['handleDataSearch'],
  computed: {
    currentShowFlag: {
      get () { return this.showFlag },
      set (val) { this.$emit('update:showFlag', val) }
    },

    status () { return this.$getDictList('data_status') },
    category () { return this.$getDictList('sys_office_category') },
    type () { return this.$getDictList('sys_office_type') },

    formField () {
      return [
        {
          prop: 'parent.name',
          label: this.$t('system_office.parentName'),
          type: 'Input',
          viewFlag: true
        },
        {
          prop: 'code',
          label: this.$t('system_office.code'),
          type: 'Input',
          rules: { trigger: 'blur', message: this.$t('validate.notBlank'), required: true }
        },
        {
          prop: 'name',
          label: this.$t('system_office.name'),
          type: 'Input',
          rules: { trigger: 'blur', message: this.$t('validate.notBlank'), required: true }
        },
        {
          prop: 'category',
          label: this.$t('system_office.category'),
          type: 'Select',
          component: {
            optionList: this.category
          },
          rules: {
            trigger: 'change',
            message: this.$t('validate.notSelect'),
            required: true
          },
          event: {
            change: this.handleCategoryChange
          }
        },
        {
          prop: 'type',
          label: this.$t('system_office.type'),
          type: 'Select',
          component: {
            optionList: this.type
          },
          hidden: this.formModel.category !== 'sys_office_category_3',
          rules: {
            trigger: 'change',
            message: this.$t('validate.notSelect'),
            required: true
          }
        },
        {
          prop: 'phone',
          label: this.$t('system_office.phone'),
          type: 'Input'
        },
        {
          prop: 'address',
          label: this.$t('system_office.address'),
          col: { xs: 12, sm: 12, md: 16 },
          type: 'Input'
        },
        {
          prop: 'status',
          label: this.$t('system_office.delFlag'),
          type: 'Select',
          component: { optionList: this.status },
          rules: { trigger: 'blur', message: this.$t('validate.notBlank'), required: true }
        },
        {
          prop: 'remarks',
          label: this.$t('field.remarks'),
          type: 'Input',
          component: { type: 'textarea' },
          col: { xs: 24, sm: 24, md: 24 }
        }
      ]
    },

    tableColumn () {
      return [
        { prop: 'code', label: this.$t('system_office.code'), width: 150 },
        { prop: 'name', label: this.$t('system_office.name'), width: 150 },
        { prop: 'category', label: this.$t('system_office.category'), width: 150, slotName: 'category' },
        { prop: 'address', label: this.$t('system_office.address'), minWidth: 200 },
        { prop: 'phone', label: this.$t('system_office.phone'), width: 120 },
        { prop: 'status', label: this.$t('system_office.delFlag'), width: 80, slotName: 'status' },
        { prop: 'remarks', label: this.$t('system_office.remarks'), width: 200 },
        { prop: 'updateBy.name', label: this.$t('system_office.updateBy'), width: 200 },
        { prop: 'updateDate', label: this.$t('system_office.updateDate'), width: 200 }
      ]
    }
  },
  props: {
    showFlag: { type: Boolean, default: false },
    viewFlag: { type: Boolean },
    detailData: { type: Object }
  },
  methods: {
    handleDialogClose () {
      this.currentShowFlag = false
    },

    handleDataSubmit () {
      this.$refs.form.$refs.simpleForm.validate(status => {
        if (status) {
          let loadingFlag = this.$loading({ target: this.$el.querySelector('.el-dialog') })
          console.log(this.formModel)
          debugger
          this.$axios
            .post(this.detailData.id ? BASEURL.update : BASEURL.save, this.formModel)
            .then(resp => {
              this.currentShowFlag = false
              this.$message({ type: 'success', message: this.$t('tip.saveSuccess') })
              this.handleDataSearch()
            })
            .finally(() => {
              loadingFlag.close()
            })
        }
      })
    },

    handleDialogOpen () {
      this.$nextTick(() => {
        this.calTableHeight()
      })

      if (!this.detailData.id) {
        this.$set(this.formModel, 'parent', this.detailData.parent)
        return
      }
      let loadingFlag = this.$loading({ target: this.$el.querySelector('.el-dialog') })

      let requestList = [this.$axios.post(BASEURL.get, { id: this.detailData.id }), this.$axios.post(BASEURL.log, { code: this.detailData.code })]
      Axios
        .all(requestList)
        .then(Axios.spread((resp, log) => {
          let respData = resp.data
          this.formModel = respData
          this.tableData = log.data.list
        }))
        .finally(() => {
          loadingFlag.close()
        })
    },

    /**
     * 变更单位类型
     * 企业类型字段只有在单位类型为 单位下属企业(sys_office_category_3) 时才会显示
     */
    handleCategoryChange (val) {
      delete this.formModel.type
    },

    // 计算table高度
    calTableHeight () {
      let mainHeight = this.$el.querySelector('.el-dialog__body').offsetHeight - 20
      let formHeight = this.$el.querySelector('.el-form').offsetHeight
      // dialog内容总高度 - 表单高度 - tabbar高度
      this.tableConHeight = mainHeight - formHeight - 55 + 'px'
    },

    handleDialogClosed () {
      this.$refs.form.resetFields()
      this.tableData.splice(0)
      this.formModel = { parent: {}, status: 'Y' }
    }
  }
}
</script>
